<template>
    <div class="home_box">
        <div class="header">
            <h4>包装<router-link to="/"><span class="iconfont">安全退出&#xea4e;</span></router-link></h4>
        </div>
        <div class="main">
            <div class="part part1"> 
                <router-link to="/package" style="text-decoration: none">
                    <div>
                        <img src="@/assets/styles/images/3.jpg" alt="">
                        <p>箱号入板</p> 
                    </div>
                </router-link>
            </div>
             <div class="part part2"> 
                <router-link to="/site" style="text-decoration: none">
                    <div>
                        <img src="@/assets/styles/images/1.png" alt="">
                        <p>配置站点</p> 
                    </div>
                </router-link>
            </div>
              <!-- <div class="part part3"> 
                <router-link to="/barcode" style="text-decoration: none">
                    <div>
                        <img src="@/assets/styles/images/2.png" alt="">
                        <p>配置参数</p> 
                    </div>
                </router-link>
            </div> -->
        </div>
    </div>
</template>

<script>
export default {
    name: 'Home'
}
</script>

<style scoped>
    .home_box{
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        color: #000;
    }
    .header h4{
        padding: 0;
        margin: 0;
        text-align: center;
        font-size: 1.2rem;
     }
    .header{
        width: 100%;
        height: 50px;
        line-height: 50px;
        background-color: #2d3a4b;
        color: #fff;
        position:relative;
    }
    .header h4 span{
        display: block;
        font-size: 0.9rem;
        position:absolute;
        top:0px;
        right: 10px;
        cursor: pointer;
        color: #fff;
    }
    .header h4 span:hover{
        color: rgb(169, 169, 177);
    }
    .main{
        display: flex;
        flex-wrap: wrap;
        margin-top: 40px;
        justify-content: center;
        text-align: center;
    }
    .part {
        vertical-align: center;
        text-align: center;
        cursor: pointer;
        width: 260px;
        margin: 14px;
        margin-left:24px;
    }
    .part img{
        width: 260px;
        height: 260px;
        margin: 0 auto;
        box-shadow: 1px 1px 1px 1px rgb(229, 234, 235);
    }
    .part p{
        font-size: 1.2em;
        font-weight: 800;
        color: #000;
        text-decoration: none!important;
    }
    .part:hover{
        text-shadow: -1px -1px white;
    }
     .part:hover p{
        color: #3281cf;
    }
    @media (min-width:1400px){
        .part img{
            width: 300px;
            height: 300px;
        }
        .part{
            width: 360px;
            margin-left: 40px;
            margin-top: 40px;
        }
    }
    @media (max-width: 995px){
        .main::after {
            display:block;
            content:"";
            width: 294px;
            height:0px;
        }
    }
    @media (max-width:595px){
        .part {
            margin-left:16px;
        }
        .part {
            width: 200px;
        }
        .part img{
            width: 200px;
            height: 200px;
        }
        .main::after {
            display:block;
            content:"";
            width: 230px;
            height:0px;
        }
        .main{
            margin-top: 20px;
        }
        .part p{
            margin-bottom: 0px;
        }
    }
    @media (max-width:459px){
        .part {
            margin-left:12px;
        }
        .main{
            margin-top: 30px;
        }
        .part {
            width: 170px;
        }
        .part img{
            width: 170px;
            height: 170px;
        }
        .main::after {
            display:block;
            content:"";
            width: 200px;
            height:0px;
        }
        .part p{
            margin-bottom: 20px;
        }
    }
    @media (max-width:399px){
        .part {
            width: 120px;
            margin-left:13px;
        }
        .part img{
            width: 120px;
            height: 120px;
        }
        .main::after {
            display:block;
            content:"";
            width: 150px;
            height:0px;
        }
    }
</style>